<template>
    <div class="wrap">
      <!--pages/fillDurg/fillDurg.wxml-->
        <div class='nav-wrap flex'>
            <div class='nav flex'>
                <div :class="{'active':navIdx === item.type}" class="nav-item flex" v-for="(item,index) in navList" :key="index" @click='changeNavTap(index,item.type)'>
                    <span class='flex'>{{item.txt}}</span>
                </div>
            </div>
        </div>
        <!-- 全部 -->
        <mt-loadmore  :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore" v-if="orderList.length" bottomPullText=" " bottomDropText=" " bottomLoadingText=" ">
          <div class='recipe-list column'>
              <div class='recipe-item column' v-for="(item,index) in orderList" :key="index" :id="'mid'+item.recipeid">
                  <div class='title border flex'>看诊医生</div>
                  <div class='recipe-detail column'>
                      <div class='doctor-info border flex' @click='goDetail(item.doctorid)'>
                          <div class='info-left flex'>
                              <img :src='item.avatar' class='imgActive'></img>
                          </div>
                          <div class='info-right column'>
                              <span class='name'>{{item.doctorname}}</span>
                              <span class='overhidden'>{{item.orgname}}   {{item.descr}}</span>
                          </div>
                          <div class='time flex' v-if="item.post_status == 1">{{item.validity_time}}</div>
                      </div>
                      <div class='info border flex'>
                          <span class='label'>辩证：</span>
                          <span>{{item.discrim}}</span>
                      </div>
                      <!-- 处方已过期 -->
                      <div class='info flex' v-if="item.recipestatus == 301">
                          <span class='red'>该处方已过期</span>
                      </div>
                      <!-- 处方未过期 -->
                      <div class='column' v-else>
                          <div class='info border top flex' v-if="item.preview_recipe == 1">
                              <span class='label'>处方：</span>
                              <div class='column recipe-content'>
                                  <span class=''>{{item.drugstatename}} - {{item.drugstorename}}</span>
                                  <span class='label'>{{item.text}}</span>
                                  <span class='num'>共{{item.quantity}}剂，每日{{item.perday_qty}}剂，每剂分{{item.per_count}}次服用</span>
                              </div>
                          </div>
                          <div class='info border flex' v-if="item.preview_recipe == 1">
                              <span class='label'>医嘱：</span>
                              <span>{{item.dose_remark}}</span>
                          </div>
                          <div class='column' v-if="item.post_status != 1">
                              <div class='info border between flex'>
                                  <span>单价：{{item.single}}元/剂</span>
                                  <span>总药价：￥{{item.drug_fee}}</span>
                              </div>
                              <div class='info border flex'>
                                  <p class='label'>药态：</p>
                                  <p>{{item.drugstatename}}</p>
                              </div>
                              <div class='info border flex top'>
                                  <div class="label">
                                    <img src='../assets/circle-active.png' class='circle-img'></img>
                                    <span class=''>{{item.delivery_type == 1?'快递寄送':item.delivery_type == 3?'门诊自取':''}}</span>
                                  </div>
                                  <span class='address' v-if="item.delivery_type == 1">{{item.name}} {{item.mobile}} {{item.area}}{{item.address}}</span>
                                  <span class='address' v-if="item.delivery_type == 3">{{item.clinicname}}</span>
                              </div>
                              <div class='info border between flex'>
                                  <span></span>
                                  <div class='column'>
                                      <span>总药费：￥{{item.drug_fee}}</span>
                                      <span class='tips' v-if="item.delivery_type == 1">+快递费：￥{{express_money}}</span>
                                  </div>
                              </div>
                              <div class='info border between flex'>
                                  <span></span>
                                  <div class='label'>合计：
                                      <span class='red'>￥{{item.total}}</span>
                                  </div>
                              </div>
                          </div>
                      </div>
                      <!-- 待收货 -->
                      <div class='info end logistics flex' v-if="item.post_status == 2">
                          <div class='look-more receiving' @click='lookLogInfoTap(item.deliveryno,index,item.post_status)' v-if="item.delivery_type == 1">查看物流</div>
                          <div class='look-more receiving' @click='receivingTap(item.recipeid,index)'>确定收货</div>
                      </div>
                      <!-- 已收货 -->
                      <div class='info logistics end flex' v-if="item.post_status == 3">
                          <div class='look-more' @click='enjoyTap(item.doctorid,index,item.registrationid)'>打赏医生</div>
                          <div class='look-more' @click='inquiryTap(item.doctorname,item.doctorid,index,item.registrationid)'>评价医生</div>
                      </div>
                      <!-- 待抓药 -->
                      <div class='get-way-wrap column border flex' v-if="item.preview_recipe == 0 && item.post_status == 1">
                          <div class='title'>购药后可查看处方</div>
                          <span class='tips'>注：本药方只针对本次患者就诊，非患者本人或病情改变，请重新咨询就诊</span>
                      </div>
                  </div>
                  <div class='submit-btn flex' v-if="item.post_status == 1" @click='payTap(item.recipeid,index)'>购药</div>
              </div>
          </div>
        </mt-loadmore>
        <div class='no-data flex' v-else>
            <img src='../assets/no-data.png'></img>
            <p>暂无订单</p>
        </div>
        <!-- 物流弹窗 -->
        <div class='layer flex' v-if="layer">
            <div class="windows column" :class="{'heightShow':logShow}" v-if="logShow">
                <div class='title flex'>
                    <span v-if="postStatus != 3">{{logDetail.length?'已发货':'未发货'}}</span>
                    <span v-if="postStatus == 3">已签收</span>
                    <img src='../assets/close.png' @click='closeTap'></img>
                </div>
                <div class='log-detail column'>
                    <div class='log-item flex'>
                        <div class='item-left flex'></div>
                        <div class='item-right flex'>
                            <div class='column icon'>
                                <img src='../assets/shou.png'></img>
                                <p class='line first'></p>
                            </div>
                            <span>[收货地址]{{address}}</span>
                        </div>
                    </div>
                    <div class='log-item flex' v-for="(item,index) in logDetail">
                        <div class='item-left flex'>{{item.createtime}}</div>
                        <div class='item-right flex'>
                            <div class='column icon'>
                                <!-- 发货图标 -->
                                <img src='../assets/fa.png' class='fa-img' v-if="index == 0 && index != logDetail.length-1"></img>
                                <img src='../assets/fa-active.png' class='fa-img' v-if="index == 0 && index == logDetail.length-1"></img>
                                <!-- 运输中图标 -->
                                <img src='../assets/transport.png' class='transport-img' v-if="index != 0 && index != logDetail.length-1"></img>
                                <img src='../assets/transport-active.png' class='transport-img' v-if="index != 0 && index == logDetail.length-1 && postStatus != 3"></img>
                                <!-- 签收图标 -->
                                <img src='../assets/finish.png' class='transport-img' v-if="index == logDetail.length-1 && postStatus == 3"></img>
                                <p class='line first' v-if="index != logDetail.length-1"></p>
                            </div>
                            <p>{{item.descr}}</p>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 支付感谢金 -->
            <div class="windows column" :class="{'heightShow':gratitudeShow}" v-if="gratitudeShow">
                <div class='title flex'>
                    <span>给{{doctorname}}医生感谢金</span>
                    <div class='close-wrap' @click='closeTap'>
                        <img src='../assets/close.png'></img>
                    </div>
                </div>
                <div class='gratitude-wrap flex'>
                    <span class="gratitude-item flex" :class="{'active':gratitudeIdx == index}" v-for="(item,index) in gratitudeList" :key="index" @click="chooseMoneyTap(index,item.txt,)">{{item.txt}}元</span>
                </div>
                <div class='other-money'>
                    <span>金额：</span>
                    <input type='number' v-model="money"></input>
                    <span>元</span>
                </div>
                <div class='pay-btn flex' @click='payMoneyTap'>支付</div>
                <div class='mask flex'>备注：感谢金所有金额直接进入医生账户</div>
            </div>
            <!-- 给医生进行评价 -->
            <div class="windows column" :class="{'heightShow':evaluateShow}" v-if="evaluateShow">
                <div class='title flex'>
                    <span class="flex">给{{doctorname}}医生进行评价</span>
                    <div class='close-wrap' @click='closeTap'>
                        <img src='../assets/close.png'></img>
                    </div>
                </div>
                <div class='evaluate-wrap column'>
                    <div class='label flex'>医生整体评价:</div>
                    <div class='grade flex'>
                        <div class="grade-item flex" :class="{'active':gradeIdx == item.type}" v-for="(item,index) in gradeList" :key="index" @click='chooseGradeTap(item.type)'>
                            <img :src="gradeIdx >= item.type ? item.imgActive:item.img"></img>
                            <span>{{item.txt}}</span>
                        </div>
                    </div>
                    <div class='remark flex'>
                        <span>评语：</span>
                        <textarea v-model="remark" placeholder='请输入评语'></textarea>
                    </div>
                    <div class='remark-list flex'>
                        <div class="remark-item" :class="{'active':item.status == 1}" v-for="(item,index) in remarkList" :key="index" @click='chooseRemarkTap(index,item.status)'>{{item.txt}}</div>
                    </div>
                    <div class='pay-btn flex' @click='submitRemarkTap'>提交</div>
                </div>
            </div>
        </div>
        <!-- 加载中 -->
        <div class='loading column' v-if="showLoading">
            <img src='../assets/load.gif'></img>
            <p>拼命加载中...</p>
        </div>
        <Bar :active='active'></Bar>
    </div>
</template>

<script>
import Bar from "./Bar";
import { Loadmore,Toast,MessageBox,Indicator } from "mint-ui";
import { myrecipebill, checkexpress,payreward,evaluatedoctor,collectGoods,webconfig } from "./../api/index";
import starActive from "../assets/star-active.png"
import star from "../assets/star.png"
export default {
  data() {
    return {
      active: "fillDurg",
      flag: true, //防止多次跳转的变量
      navList: [
        {
          txt: "待抓药",
          type: 1
        },
        {
          txt: "待收药",
          type: 2
        },
        {
          txt: "已收药",
          type: 3
        },
        {
          txt: "全部",
          type: 0
        }
      ], //导航栏数组
      navIdx: 1, //导航栏索引
      navLeft: 30, //下划线滑动距离
      screenWidth: null, //获取屏幕宽度
      layer: false, //蒙层显示\隐藏
      logShow: false, //物流弹窗
      orderList: [], //订单数组
      showLoading: true,
      page: 0,
      pagesize: 10,
      logDetail: [], //物流数组
      address: "", //地址
      areaHeight: "", //内容区域高度
      scrollInto: "", //跳转
      outTime: 1500, //延时时间
      postStatus: "", //订单的状态
      allLoaded: false,
      doctorname:'',//評價醫生姓名
      doctorid: "", //評價醫生id
      registrationid: "", //掛號id
      gratitudeShow:false,
      evaluateShow:false,
      gratitudeList: [
        {
          txt: "5"
        },
        {
          txt: "10"
        },
        {
          txt: "15"
        },
        {
          txt: "20"
        }
      ], //感谢金数组
      gratitudeIdx: -1, //感谢金索引
      chooseMoney: "",
      money: "", //感谢金
      gradeList: [
          {
              img: star,
              imgActive: starActive,
              type: 1
          },
          {
              img: star,
              imgActive: starActive,
              type: 2
          },
          {
              img: star,
              imgActive: starActive,
              type: 3
          },
          {
              img: star,
              imgActive: starActive,
              type: 4
          },
          {
              img: star,
              imgActive: starActive,
              type: 5
          },
      ],//评价分数组    
      gradeIdx: 5, //评价分索引
      remarkList: [
        {
          txt: "响应速度很快",
          status: 0
        },
        {
          txt: "回答很专业",
          status: 0
        },
        {
          txt: "意见很有帮助",
          status: 0
        },
        {
          txt: "讲解很细致",
          status: 0
        },
        {
          txt: "回答的及时",
          status: 0
        },
        {
          txt: "态度很好",
          status: 0
        }
      ], //评语数组
      remark: "", //评语
      express_money:''
    };
  },
  components: {
    Bar
  },
  mounted() {
    let recipeData = JSON.parse(sessionStorage.getItem("recipeData"));
    if (recipeData) {
      this.navIdx = recipeData.type;
    }
    webconfig(sessionStorage.getItem("mstr")).then((res)=>{
      if(res.data.status === 1){
        this.express_money = res.data.data.express_money
      }
    })
    this.getRecipeList();
  },
  methods: {
    //获取订单列表
    getRecipeList() {
      let mstr = sessionStorage.getItem("mstr");
      myrecipebill(mstr, this.navIdx, this.page, this.pagesize).then(res => {
        console.log(res.data);
        if (res.data.status === 1) {
          let i,
            len = res.data.data.length;
          for (i = 0; i < len; i++) {
            //计算处方总价
            if (res.data.data[i].delivery_type == 1) {
              res.data.data[i].total = (
                res.data.data[i].drug_fee * 1 + this.express_money * 1
              ).toFixed(2);
            } else {
              res.data.data[i].total = (res.data.data[i].drug_fee * 1).toFixed(
                2
              );
            }
            //计算药品单价
            res.data.data[i].single = (
              res.data.data[i].drug_fee *
              1 /
              res.data.data[i].quantity *
              1
            ).toFixed(4);
          }
          (this.orderList = this.orderList.concat(res.data.data)),
            (this.page = this.page + this.pagesize);
          let recipeData = JSON.parse(sessionStorage.getItem("recipeData"));
          if (recipeData) {
            this.$nextTick(() => {
              let container = this.$el.querySelector(
                "#mid" + recipeData.recipeid
              );
              container.scrollIntoView();
            });
            sessionStorage.removeItem("recipeData");
          }
        } else {
          this.allLoaded = true;
          if (this.$refs.loadmore) {
            this.$refs.loadmore.onBottomLoaded();
          }
        }
        Indicator.close()
        this.showLoading = false;
      });
    },
    //加载更多
    loadBottom() {
      this.getRecipeList();
    },
    //切换头部类型
    changeNavTap(index, type) {
      this.navIdx = type;
      this.orderList = [];
      this.page = 0;
      Indicator.open('加载中')
      this.getRecipeList();
    },
    //去购药
    payTap(recipeid, index) {
      this.$router.push({
        name: "buyDurg",
        params: {
          recipeid: recipeid,
          status: "fillDurg"
        }
      });
    },
    //去医生详情
    goDetail(id) {
      this.$router.push({
        name: "doctorDetail",
        params: {
          id: id
        }
      });
    },
    //查看物流
    lookLogInfoTap(orderid, index, status) {
      let mstr = sessionStorage.getItem("mstr");
      this.address = `${this.orderList[index].name} ${this.orderList[index].mobile} ${this.orderList[index].area}${this.orderList[index].address}`
      this.logDetail = this.orderList[index].logistics_data
      this.postStatus = status
      this.logShow = true
      this.layer = true
      if (this.flag && orderid) {
        this.flag = false;
        checkexpress(mstr, orderid).then(res => {
          if (res.data.status === 1) {
            this.logDetail = res.data.data;
          } else {
            this.logDetail = [];
          }
          setTimeout(() => {
            this.flag = true;
          }, this.outTime);
        });
      }
    },
    //关闭弹窗
    closeTap() {
      this.logShow = false;
      this.layer = false;
      this.gratitudeShow = false;
      this.evaluateShow = false
    },
    //弹出支付感谢金窗口
    enjoyTap(doctorid,index,registrationid) {
      this.gratitudeShow = true
      this.layer = true
      this.doctorid = doctorid
      this.registrationid = registrationid
    },
    //弹出评价窗口
    inquiryTap(doctorname,doctorid,registrationid) {
      this.evaluateShow = true
      this.layer = true
      this.doctorname = doctorname
      this.doctorid = doctorid
      this.registrationid = registrationid
    },
    //选择感谢金
    chooseMoneyTap(index,txt) {
      this.gratitudeIdx = index
      this.chooseMoney = txt
    },
    //选择评价等级
    chooseGradeTap(type) {
      this.gradeIdx = type
    },
    //选择评语
    chooseRemarkTap(index,status) {
      if (status == 0) {
        this.remarkList[index].status = 1;
      } else {
        this.remarkList[index].status = 0;
      }
    },
    //支付感谢金
    payMoneyTap() {
      if (
        this.gratitudeIdx == -1 &&
        !this.money.replace(/(^\s*)|(\s*$)/g, "")
      ) {
        Toast({
          message: "请输入金额",
          position:'center',
          duration:2000
        });
        return false;
      }
      let money = "";
      if (this.money) {
        money = this.money;
      } else {
        money = this.chooseMoney;
      }
      if (this.flag) {
        this.flag =  false
        payreward(sessionStorage.getItem('mstr'),money,this.doctorid,this.registrationid).then((res)=>{
          if (res.data.status === 1) {
            WeixinJSBridge.invoke(
              "getBrandWCPayRequest",
              {
                debug: true,
                appId: "wx3fcdf896d0627cb9", //公众号名称，由商户传入
                timeStamp: res.data.data.timeStamp.toString(), //时间戳，自1970年以来的秒数
                nonceStr: res.data.data.nonceStr, //随机串
                package: res.data.data.package,
                signType: res.data.data.signType, //微信签名方式：
                paySign: res.data.data.paySign, //微信签名
                //这里的信息从后台返回的接口获得。
                jsApiList: ["chooseWXPay"]
              },
              res => {
                if (res.err_msg == "get_brand_wcpay_request:ok") {
                  this.gratitudeShow = false;
                  this.layer = false;
                  this.flag = true
                  Toast({
                    message: "打赏成功",
                    position: "center",
                    duration: 2000
                  });
                  
                } else {
                  alert("取消支付！");
                  this.gratitudeShow = false;
                  this.layer = false;
                  this.flag = true;
                }
              }
            );
          }else{
            this.flag = true;
          }
         
        })
      }
    },
    //提交评价
    submitRemarkTap() {
      let mstr = sessionStorage.getItem("mstr");
      if (this.flag) {
        this.flag = false;
        evaluatedoctor(
          mstr,
          this.doctorid,
          this.remark,
          this.gradeIdx,
          this.remarkList[0].status,
          this.remarkList[1].status,
          this.remarkList[2].status,
          this.remarkList[3].status,
          this.remarkList[4].status,
          this.remarkList[5].status,
          this.registrationid
        ).then(res => {
          if (res.data.status === 1) {
            Toast({
              message: "评价成功",
              position: "center",
              duration: 2000
            });
          } else {
            Toast({
              message: res.data.info,
              position: "center",
              duration: 2000
            });
          }
          setTimeout(() => {
            this.evaluateShow = false;
            this.layer = false;
            this.flag = true;
            this.remark = "";
          }, 1000);
        });
      }
    },
    //确定收货
    receivingTap(recipeid,index){
      let mstr = sessionStorage.getItem('mstr')
      MessageBox.confirm('您确定该订单已收货吗？').then(action => { 
        collectGoods(mstr,recipeid).then((res)=>{
          if(res.data.status === 1){
            this.orderList.splice(index,1)
            Toast({
              message:'收货成功',
              position:'center',
              dutation:2000
            })
          }else{
            Toast({
              message:res.data.info,
              position:'center',
              dutation:2000
            })
          }
        })
      });
    }
  },
  props: {}
};
</script>

<style lang="scss" scoped>
/* pages/fillDurg/fillDurg.wxss */
@import "../base/css/_base.scss";
.wrap {
  padding: torem(101px) 0 torem(100px) 0;
}
.red {
  color: #db5033;
  font-weight: normal;
}

.border {
  border-bottom: 1px solid #f2e3d0;
}

/* d导航 */

.nav-wrap {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
  height: torem(101px);
  background-color: #5b5250;
  z-index: 100;
}

.nav-wrap .nav {
  position: relative;
  width: 100%;
  height: 100%;
}

.nav .border-bottom {
  height: torem(2px);
  width: torem(128px);
  position: absolute;
  bottom: torem(6px);
  background: #bf8440;
  transition: 0.5s;
  z-index: 10;
}

.nav .nav-item {
  flex: 1;
  height: 100%;
  align-items: center;
  color: #fff;
  font-size: torem(34px);
  padding: torem(6px) torem(15px);
}

.nav .nav-item span {
  align-items: center;
  width: 100%;
  justify-content: center;
}

.nav .nav-item.active span {
  height: 100%;
  font-weight: bold;
  /* border-bottom: 1px) solid #bf8440; */
  color: #bf8440;
}

/* 处方详情 */

.recipe-list {
  // padding-top: torem()
}

.recipe-list .recipe-item {
  background: #fff;
  margin-bottom: torem(30px);
}

.recipe-item > .title {
  padding: torem(17px) torem(30px);
  font-size: torem(26px);
  color: #333;
  align-items: center;
}

.recipe-detail {
  padding-left: torem(30px);
}

.recipe-detail .doctor-info,
.recipe-detail .info {
  padding: torem(20px) torem(20px) torem(20px) 0;
}

.doctor-info .info-left {
  margin-right: torem(25px);
}

.doctor-info .info-left img {
  width: torem(85px);
  height: torem(85px);
  border-radius: 50%;
  border: torem(4px) solid #efb96a;
}

.doctor-info .info-right {
  flex: 1;
  color: #808080;
  font-size: torem(26px);
  justify-content: center;
}

.doctor-info .info-right .name {
  color: #333;
  font-size: torem(30px);
  font-weight: bold;
  margin-bottom: torem(10px);
}

.doctor-info .info-right .overhidden {
  width: torem(400px);
}

.doctor-info .time {
  height: torem(48px);
  width: torem(180px);
  background-color: #db5033;
  border-radius: torem(6px);
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: torem(24px);
}

.recipe-detail .info {
  font-size: torem(26px);
  color: #333;
  align-items: center;
  position: relative;
}

.recipe-detail .info div {
  font-size: torem(26px);
}

.recipe-detail .info .tips {
  color: #666;
  font-size: torem(22px);
  margin-top: torem(10px);
}

.recipe-detail .info.top {
  align-items: flex-start;
}

.recipe-detail .info .label {
  margin: 0 torem(10px);
}

.recipe-detail .info .address{
  align-items: flex-start;
  width: torem(500px);

}

.recipe-detail .info.between {
  justify-content: space-between;
}
.recipe-detail .info.end {
  justify-content: flex-end;
}
.recipe-detail .info.end .look-more {
  margin-left: torem(40px);
  border: 1px solid #db5033;
  padding: torem(10px) torem(20px);
  border-radius: torem(6px);
  background: #db5033;
  color: #fff;
}

.recipe-detail .info .recipe-content {
  flex: 1;
  line-height: torem(45px);
}

.recipe-detail .info .label {
  font-size: torem(28px);
  color: #333;
  font-weight: bold;
}

.recipe-detail .info .num {
  text-align: right;
}

.logistics .overhidden {
  width: torem(220px);
}
.logistics  .receiving.look-more{
  border: 1px solid #db5033;
  padding: torem(10px) torem(20px);
  border-radius: torem(6px);
  background: #db5033;
  color: #fff;
}
.info .circle-img {
  width: torem(24px);
  height: torem(24px);
}

/* 取药 */

.get-way-wrap {
  padding: 0 torem(20px) torem(24px) 0;
}


.submit-btn {
  width: torem(300px);
  height: torem(80px);
  background-color: #db5033;
  border-radius: torem(6px);
  align-items: center;
  justify-content: center;
  font-size: torem(30px);
  color: #fff;
  margin: torem(40px) auto;
}

/* 物流信息的弹框 */

.windows {
  width: torem(650px);
  background: #fff;
  border-radius: torem(10px);
}

.windows .title {
  padding: torem(30px) 0;
  color: #333;
  font-size: torem(30px);
  font-weight: bold;
  justify-content: center;
  position: relative;
  width: 100%;
  height: torem(91px);
  border-bottom: 1px solid #d6d0c7;
}

.windows .title img {
  width: torem(50px);
  height: torem(50px);
  position: absolute;
  right: torem(20px);
  top: 50%;
  transform: translateY(-50%);
}

.windows .log-detail {
  padding: torem(30px) torem(20px);
  max-height: torem(600px);
  overflow: scroll;
  display: block;
}

.log-item {
  position: relative;
  padding: torem(20px) 0;
  align-items: center;
}

.log-item .item-left {
  font-size: torem(20px);
  color: #0d0d0d;
  width: torem(70px);
}

.log-item .item-right {
  flex: 1;
  position: relative;
  min-height: torem(70px);
}
.item-right .icon {
  align-items: center;
  margin: 0 torem(20px) 0 torem(10px);
}
.log-item .item-right img {
  width: torem(39px);
  height: torem(51px);
  margin-bottom: torem(10px);
}

.log-item .item-right .fa-img {
  width: torem(40px);
  height: torem(42px);
  margin-bottom: torem(10px);
}
.log-item .item-right .transport-img {
  width: torem(40px);
  height: torem(24px);
  margin-bottom: torem(10px);
}

.log-item .item-right span {
  flex: 1;
  color: #666;
  font-size: torem(24px);
}

.log-item .item-right .line {
  height: 90%;
  width: torem(2px);
  border-left: 2px dashed #999;
  display: block;
}

/* 获取地理位置弹窗 */

.location-windows {
  width: torem(560px);
  height: torem(400px);
  background: #fff;
  border-radius: torem(10px);
  z-index: 101;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.location-windows img {
  width: torem(50px);
  height: torem(50px);
  position: absolute;
  right: torem(20px);
  top: torem(20px);
  display: block;
}

.location-windows .txt {
  color: #333;
  font-size: torem(30px);
  margin: torem(80px) 0 torem(20px) 0;
  display: block;
  width: 100%;
  text-align: center;
}

.location-windows .accredit-btn {
  width: torem(266px);
  height: torem(80px);
  background-color: #db5034;
  border-radius: torem(6px);
  color: #fff;
  font-size: torem(30px);
  margin: torem(50px) 0 torem(80px) 0;
  align-items: center;
  justify-content: center;
}

/* 待抓药 */

.get-way-wrap .title {
  color: #db5033;
  font-size: torem(26px);
  font-weight: bold;
  padding: torem(20px) 0 torem(10px) 0;
}

.get-way-wrap .tips {
  margin: 0;
  font-size: torem(20px);
}

/* 感谢金 */
.windows .pay-btn {
    width: torem(269px);
    height: torem(86px);
    background-color: #d55940;
    border-radius: torem(6px);
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: torem(32px);
    margin: 0 auto;
    font-weight: bold;
}
.windows .mask {
    color: #4d4d4d;
    font-size: torem(24px);
    margin: torem(30px) auto torem(60px);
    justify-content: center;
}
.windows .gratitude-wrap {
  padding: torem(30px);
  flex-wrap: wrap;
  justify-content: space-between;
}

.gratitude-wrap .gratitude-item {
  min-width: torem(100px);
  padding: 0 torem(20px);
  height: torem(60px);
  border-radius: torem(6px);
  border: solid torem(2px) #999;
  align-items: center;
  justify-content: center;
  font-size: torem(28px);
  color: #666;
}

.gratitude-wrap .gratitude-item.active {
  border: solid 1px #d55940;
  color: #d55940;
}

.windows .other-money {
  color: #333;
  font-size: torem(28px);
  align-items: center;
  padding: torem(30px) 0 torem(60px) torem(30px);
}

.windows .other-money input {
  width: torem(400px);
  height: torem(60px);
  border-radius: torem(6px);
  border: solid torem(2px) #d55940;
  padding-left: torem(15px);
}

.windows .other-money input.disabled {
  border: solid torem(2px) #999;
}

/* 评价分 */

.evaluate-wrap {
  padding: 0 torem(40px) torem(40px) torem(40px);
}

.evaluate-wrap .label {
  color: #333;
  font-size: torem(28px);
  margin: torem(30px) 0 0 0;
}

.evaluate-wrap .grade {
  justify-content: space-between;
}

.grade .grade-item {
  color: #666;
  font-size: torem(26px);
  align-items: center;
  padding: torem(30px) torem(20px);
}

.grade .grade-item.active {
  color: #333;
}

.grade .grade-item img {
  width: torem(48px);
  height: torem(48px);
  margin-right: torem(10px);
}

.windows .remark {
  color: #333;
  font-size: torem(28px);
  margin-top: torem(10px);
}

.windows .remark textarea {
  height: torem(160px);
  border-radius: torem(6px);
  border: solid torem(2px) #d55940;
  padding: torem(20px);
  margin-left: torem(10px);
  font-size: torem(28px);
  flex: 1;
}

.evaluate-wrap .remark-list {
  justify-content: space-between;
  flex-wrap: wrap;
  margin: torem(30px) 0;
}

.remark-list .remark-item {
  min-width: torem(110px);
  padding: torem(10px) torem(15px);
  height: torem(50px);
  border-radius: torem(6px);
  border: solid torem(2px) #d55940;
  color: #d55940;
  font-size: torem(22px);
  align-items: center;
  justify-content: center;
  margin-bottom: torem(20px);
}

.remark-list .remark-item.active {
  background: #d55940;
  color: #fff;
}
</style>